import PlaceHolderCpn from '@/components/PlaceHolderCpn';
import { queryParkinglotNames } from '@/pages/Parking/Spot/service';
import { Auths, Role } from '@/utils/types.d';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { useModel } from 'umi';
import CancelOrder from '../components/CancelOrder';
import ImportOrder from '../components/ImportOrder';
import { queryArrearOrders } from '../service';
import { ArrearOrderTableItem, PayStatus } from '../types.d';
// import { PayMode } from '../types.d';

export default () => {
  const { initialState } = useModel('@@initialState');
  const currUser = initialState?.currentUser;
  const auths = currUser?.auth ? new Set(currUser.auth.parkingOrder || []) : new Set();
  const ifImport = auths.has(Auths.IMPORT);
  const ifModify = auths.has(Auths.MODIFY);
  const columns: ProColumns<ArrearOrderTableItem>[] = [
    {
      title: '所属用户',
      align: 'center',
      hideInTable: currUser?.role != Role.ADMIN,
      dataIndex: ['ownerInfo', 'ownerName'],
      hideInSearch: true,
    },
    {
      title: '订单编号',
      dataIndex: 'orderNo',
      align: 'center',
      hideInForm: true,
      renderText: (text, record) => {
        if (record.isImport) return text + '(导)';
        return text;
      },
    },
    {
      title: '订单来源',
      dataIndex: 'isImport',
      hideInTable: true,
      hideInForm: true,
      valueEnum: {
        true: { text: '外部导入' },
        false: { text: '系统生成' },
      },
    },
    {
      title: '路段名称',
      dataIndex: 'parkingLotId',
      hideInForm: true,
      align: 'center',
      render: (_, record) => record.parkingLotName,
      fieldProps: { showSearch: true },
      debounceTime: 300,
      request: (val) => queryParkinglotNames(val.keyWords),
    },
    {
      title: '泊位编号',
      dataIndex: 'spotId',
      hideInForm: true,
      // hideInTable: true,
      align: 'center',
    },
    {
      title: '车牌号码',
      dataIndex: 'plateNumber',
      align: 'center',
      hideInForm: true,
    },
    {
      title: '车辆类型',
      dataIndex: 'vehicleType',
      align: 'center',
      hideInForm: true,
      hideInSearch: true,
      width: 100,
      valueEnum: {
        0: { text: '普通小型车' },
        1: { text: '普通大型车' },
        2: { text: '新能源小型车' },
        3: { text: '新能源大型车' },
        4: { text: '警车' },
        5: { text: '武警' },
      },
    },
    {
      title: '应收金额',
      dataIndex: 'payableAmount',
      hideInSearch: true,
      width: 80,
      align: 'center',
      valueType: 'money',
      renderText: (text) => (text / 100).toFixed(2),
    },
    {
      title: '实收金额',
      dataIndex: 'actualAmount',
      hideInSearch: true,
      align: 'center',
      valueType: 'money',
      renderText: (text) => (text / 100).toFixed(2),
    },
    {
      title: '支付状态',
      dataIndex: 'payStatus',
      align: 'center',
      hideInForm: true,
      hideInSearch: true,
      valueEnum: {
        0: { text: '免费', status: 'Success' },
        1: { text: '未付', status: 'Error' },
        2: { text: '未结清', status: 'Processing' },
        3: { text: '已结清', status: 'Success' },
        99: { text: '未结算', status: 'Default' },
      },
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
      hideInForm: true,
      hideInTable: true,
      valueType: 'dateTime',
    },
    {
      title: '结束时间',
      dataIndex: 'endTime',
      hideInForm: true,
      hideInTable: true,
      valueType: 'dateTime',
    },
    {
      title: '驶入时间',
      dataIndex: 'inTime',
      align: 'center',
      valueType: 'dateTime',
      hideInForm: true,
      hideInSearch: true,
      sorter: true,
    },
    {
      title: '驶出时间',
      dataIndex: 'outTime',
      align: 'center',
      valueType: 'dateTime',
      hideInForm: true,
      hideInSearch: true,
      sorter: true,
    },
    {
      title: '操作',
      valueType: 'option',
      align: 'center',
      fixed: 'right',
      render: (_, record, x, action) => {
        if (!ifModify) return <PlaceHolderCpn text="无操作权限" />;
        if (record.payStatus != PayStatus.WAITING) return <PlaceHolderCpn text="不可作废" />;
        return (
          <CancelOrder
            orderNo={record.orderNo}
            reload={() => {
              action?.reload();
            }}
            isArrear
          />
        );
      },
    },
    // {
    //   title: '创建时间',
    //   dataIndex: 'createTime',
    //   align: 'center',
    //   hideInForm: true,
    //   hideInSearch: true,
    //   valueType: 'dateTime',
    //   width: 150,
    // },
  ];

  return (
    <PageHeaderWrapper
      header={{
        title: '',
        subTitle: '订单管理',
        breadcrumb: {
          routes: [
            { path: '/', breadcrumbName: '首页' },
            { path: '/order', breadcrumbName: '订单管理' },
            { path: '/order/arrear-list', breadcrumbName: '欠费订单列表' },
          ],
        },
      }}
    >
      <ProTable<ArrearOrderTableItem>
        columns={columns}
        rowKey="_id"
        scroll={{ x: true }}
        style={{ whiteSpace: 'nowrap' }}
        search={{
          labelWidth: 'auto',
        }}
        columnEmptyText="暂无数据"
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          defaultPageSize: 10,
          size: 'default',
        }}
        debounceTime={300}
        request={async (param, sort) => {
          const res = await queryArrearOrders(param, sort);
          return res;
        }}
        toolBarRender={(action) => [
          ifImport && <ImportOrder key="import_order" func={() => action?.reload()} />,
        ]}
      />
    </PageHeaderWrapper>
  );
};
